// =============================================================================
// SCSS/SITE/STACKS/INTEGRITY/RESP/_NAVBAR.SCSS
// -----------------------------------------------------------------------------
// Necessary styling for a responsive navbar.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Breakpoint: cubs (Tablets and Below)
//   02. Breakpoint: mama-bear (Defaut Desktop)
// =============================================================================

// Breakpoint: cubs (Tablets and Below)
// =============================================================================

@include break(cubs) {

  //
  // 1. Remove any padding from the <body>.
  // 2. Unfix the navbars.
  //

  body {
    &.x-navbar-fixed-top-active,
    &.x-navbar-fixed-left-active,
    &.x-navbar-fixed-right-active {
      padding: 0; // 1
    }
  }

  .x-navbar-fixed-top,
  .x-navbar-fixed-left,
  .x-navbar-fixed-right {
    position: relative; // 2
  }

  .x-navbar-fixed-left,
  .x-navbar-fixed-right {
    width: auto;
    @include box-shadow($baseBoxShadowNavbar);

    .x-brand {
      float: left;
      text-align: none;
    }

    .x-nav > li > a {
      text-align: left;
    }
  }


  //
  // Collapsible Navbar
  //

  .x-nav-collapse {
    display: block;
    clear: both;
  }


  //
  // Block-level the nav.
  //

  .x-nav-collapse .x-nav {
    float: none;
    margin: 1.5em 0;
  }
  
  .x-nav-collapse .x-nav > li {
    float: none;
  }


  //
  // Nav and dropdown links in navbar.
  //

  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a,
  .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a {
    height: auto;
    margin: 2px 0;
    padding: $navbarLinkPaddingMobile;
    @include font-size(1.2);
    line-height: 1.5;
    border-radius: 4px;
    @include transition(#{none});
  }

  .x-nav-collapse .sub-menu a {
    color: $navbarLinkColor;
  }
  
  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover,
  .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > .current-menu-item > a {
    color: $dropdownCollapseLinkColorHover;
    background-color: $dropdownCollapseLinkBackgroundHover;
    @include box-shadow(#{none});
  }


  //
  // Search.
  //

  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li.menu-item-navbar-search {
    margin-top: 4px;

    > a {
      border: 1px solid;
      letter-spacing: 2px;
    }
  }


  //
  // Dropdowns in the navbar.
  //

  .x-nav-collapse .sub-menu {
    position: static;
    top: auto;
    left: auto;
    float: none;
    display: block;
    max-width: none;
    margin: 0 1.5em;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    @include box-shadow(none);
  }
  
  .x-nav-collapse .sub-menu:before,
  .x-nav-collapse .sub-menu:after {
    display: none;
  }


  //
  // Pull right (secondary) nav content.
  //

  .x-navbar .x-nav-collapse .x-nav.right {
    float: none;
    margin-left: 0;
  }


  //
  // Hide everything in the navbar save .brand and toggle button.
  //

  .x-nav-collapse,
  .x-nav-collapse.collapse {
    overflow: hidden;
    height: 0;
  }


  //
  // Makes longer lines break on mobile.
  //

  .sf-menu > li a {
    white-space: normal;
  }


  //
  // Forces all dropdown nav items to display on mobile with Superfish.
  //

  .sf-menu ul {
    visibility: visible !important;
    display: block !important;
  }


  //
  // Reset dropdown font size to match top level nav if set differently on
  // desktop.
  //

  .sub-menu a {
    font-size: $navbarFontSize;
  }


  //
  // Reset fixed top navbar on tablets.
  //

  .x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top.x-container-fluid.max.width {
    left: 0;
    right: 0;
    width: 100%;
  }


  //
  // Logo and navigation layout styles.
  //

  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }

  .masthead-stacked {
    .x-navbar {
      text-align: center;

      .x-nav {
        text-align: initial;
      }
    }

    .x-btn-navbar {
      display: inline-block;
    }
  }
}



// Breakpoint: mama-bear (Default Desktop)
// =============================================================================

//
// Required to make the collapsing navbar work on regular desktops
//

@include break(mama-bear) {
  .x-nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}